<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>3D Globe</title>

    <style>
      html,
      body {
        height: 100%;
      }
      body {
        margin: 0;
        background: black;
      }

      canvas {
        height: 100%;
        width: 100%;
      }

      h1 {
        position: absolute;
        z-index: 1;
        color: white;
        right: 60px;
        top: 20px;
        font-family: serif;
      }

      #loader {
        display: none;
        height: 100%;
        align-items: center;
        justify-content: center;
        color: white;
        flex-direction: column;
      }
      #loader h2 {
        font-weight: normal;
      }

      #loader-progress {
        font-size: 4em;
      }
      #total-textures {
        font-size: 0.5em;
      }
    </style>

    <body>
      <h1>Motherland</h1>

      <div id="loader">
        <h2>
          Loading textures...
        </h2>
        <div id="loader-progress">
          <span id="loaded-textures">0</span>
          <small>/</small>
          <span id="total-textures">0</span>
        </div>
      </div>

      <script src="./src/main.js"></script>
    </body>
  </head>
</html>
